<!--
  步骤条项
  props：
    title string 标题
    inactiveIcon string 非激活f7图标(https://framework7.io/icons/)
    activeIcon string 激活f7图标
    activeColor string 激活颜色(外部包裹qm-steps并且传了activeColor会传递下来) default：#1CBC9A
    inactiveColor string 非激活颜色(外部包裹qm-steps并且传了inactiveColor会传递下来) default：#61677A
-->
<template>
  <van-step :style="varStyle">
    {{title}}
    <template #inactive-icon>
      <slot name="inactive-icon">
        <f7-icon :f7="inactiveIcon" icon="inactive-step" :size="stepIconSize"></f7-icon>
      </slot>
    </template>
    <template #active-icon>
      <slot name="active-icon">
        <f7-icon :f7="activeIcon" icon="active-step" :size="stepIconSize"></f7-icon>
      </slot>
    </template>
    <template #finish-icon>
      <slot name="finish-icon">
        <f7-icon :f7="inactiveIcon" icon="finish-step" :size="stepIconSize"></f7-icon>
      </slot>
    </template>
  </van-step>
</template>

<script>
import { Step } from "vant"
export default {
  name: "qm-step",
  components: {
    [Step.name]: Step
  },
  props: {
    title: String,
    inactiveIcon: {
      type: String,
      default: "pencil_circle"
    },
    activeIcon: {
      type: String,
      default: "pencil_circle_fill"
    },
    activeColor: {
      type: String,
      default: "#1CBC9A"
    },
    inactiveColor: {
      type: String,
      default: "#61677A"
    }
  },
  data() {
    return {
      stepIconSize: "18px"
    }
  },
  computed: {
    varStyle() {
      return ({
        "--active-color": this.activeColor,
        "--inactive-color": this.inactiveColor
      })
    }
  }
}
</script>

<style lang="less" scoped>
.active-step, .finish-step {
  color: var(--active-color);
}
.inactive-step {
  color: var(--inactive-color);
}

::v-deep {
  .van-step__line {
    background-color: var(--color-text-weak) !important;
  }
}
.van-step--finish {
  ::v-deep .van-step__line {
    background-color: var(--active-color) !important;
  }
}
</style>